body{background:#ECF0F1}

.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:100px;
  height:100px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:red;animation-delay:1s}
.load :nth-child(2){background:yellow;animation-delay:0.5s}
.load :nth-child(3){background:blue;animation-delay:1.5s}
.load :last-child{background:green}

@keyframes spin{
  {transform:translate(0)}
  {transform:translate(200%)}
  {transform:translate(200%, 200%)}
  25%{transform:translate(0, 200%)}
}